<template>
	<div id="app">
		<div id="blank">
		</div>
		<div id="container">
			<div id="leftimg"></div>
			<div id="rightlog">
				<div id="righttop">
					点餐系统
				</div>
				<div id="rightbottom">
					<div id="type">
						<!--<span>登陆</span>-->
						<el-button type="text" @click="isLog=true">已有账号</el-button>
						<el-divider direction="vertical"></el-divider>
						<!--<span>注册</span>-->
						<el-button type="text" @click="isLog=false">成为管理员</el-button>
					</div>
					<el-divider></el-divider>
					<!--登陆-->
					<div id="" v-if="isLog">
						<el-form :model="dataForm" ref="dataForm" status-icon>
							<el-form-item prop="username">
								<el-input placeholder="请输入账号" prefix-icon="el-icon-user" v-model="dataForm.userid" clearable>
								</el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input placeholder="请输入密码" prefix-icon="el-icon-link" v-model="dataForm.password" clearable show-password>
								</el-input>
								</span>
								</el-input>
							</el-form-item>
							<el-form-item label="登陆权限" label-width="80px" label-position="left">
								<el-select placeholder="请选择权限" v-model="dataForm.permission">
									<el-option label="管理员" value="1"></el-option>
									<el-option label="服务员" value="2"></el-option>
									<el-option label="大厨们" value="3"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" v-loading="loading" @click="dataFormSubmitHandle()" class="w-percent-100 loginBtnStyle">登陆</el-button>
							</el-form-item>
						</el-form>
					</div>
					<!--注册-->
					<div id="" v-if="!isLog">
						<el-form :model="dataForm" ref="dataForm" status-icon>
							<el-form-item prop="username">
								<el-input placeholder="请输入管理员名" prefix-icon="el-icon-star-off" v-model="dataForm.username" clearable>
								</el-input>
								</span>
								</el-input>
							</el-form-item>
							<el-form-item prop="username">
								<el-input placeholder="请输入管理员账号" prefix-icon="el-icon-user" v-model="dataForm.userid" clearable>
								</el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input placeholder="请输入管理员密码" prefix-icon="el-icon-link" v-model="dataForm.password" clearable show-password>
								</el-input>
								</span>
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" v-loading="loadingc" @click="Administratorregistration()" class="w-percent-100 loginBtnStyle">注册</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'App',
		data() {
			return {
				loading: false,
				loadingc: false,
				isLog: true,
				dataForm: {
					userid: "",
					password: "",
					permission: "",
					username: ""
				},
				value: ''
			}
		},
		methods: {
			dataFormSubmitHandle() {
				/*用户登陆*/
				this.loading = true;
				let user = {
					userid: this.dataForm.userid,
					password: this.dataForm.password,
					permission: parseInt(this.dataForm.permission)
				}
				setTimeout(() => {
					this.$http.post('http://localhost:8080/OrderFoodSystemServer/order/login', user)
						.then((response) => {
							if(response.data.isOK) {
								this.loading = false;
								let messages = "欢迎光临," + response.data.body.username + "!";
								this.$message({
									type: 'success',
									message: messages
								});
								this.$store.commit('users/user', this.value);
							} else {
								this.loading = false;
								this.$message({
									type: 'warning',
									message: "登陆失败，账号密码或权限错误！"
								});
							}
						})
				}, 1000);
			},
			Administratorregistration() {
				/*管理员注册*/
				this.loadingc = true;
				let user = {
					username: this.dataForm.username,
					userid: this.dataForm.userid,
					password: this.dataForm.password
				}
				setTimeout(() => {
					this.$http.post('http://localhost:8080/OrderFoodSystemServer/order/registration', user)
						.then((response) => {
							if(response.data.isOK) {
								this.loadingc = false;
								this.$message({
									type: 'success',
									message: "注册成功"
								});
								this.isLog = true;
								this.permission = "1";
							} else {
								this.loadingc = false;
								this.$message({
									type: 'warning',
									message: "注册失败，用户名或账号重复！"
								});
							}
						})
				}, 1000);

			}
		}
	}
</script>

<style>
	#app {
		width: 100%;
		height: 590px;
		text-align: center;
		background-image: url(../../build/55.png);
		background-size: cover;
	}
	
	#blank {
		width: 100%;
		height: calc(50% - 250px);
	}
	
	#container {
		width: 70%;
		height: 500px;
		background: #fff;
		margin: 0px auto;
	}
	
	#leftimg {
		width: 60%;
		height: 100%;
		float: left;
		/*background-color: #696969;*/
		background-image: url(../../build/12.png);
		background-size: cover;
	}
	
	#rightlog {
		width: 40%;
		height: 100%;
		float: left;
		/*background-color: #DCDCDC*/
	}
	
	#righttop {
		width: 100%;
		height: 15%;
		margin-top: 25%;
		font-size: 30px;
		font-weight: 600;
		text-align: center;
		letter-spacing: 15px;
		color: #4169E1;
		/*background-color: #545C64;*/
	}
	
	#rightbottom {
		width: 80%;
		height: 50%;
		/*margin-top: 10%;*/
		margin-left: 10%;
		/*background-color: #6495ED;*/
	}
	
	.el-button--primary {
		width: 100%;
		letter-spacing: 15px;
		background-color: #4169E1;
	}
	
	#type {
		text-align: left;
		margin-bottom: -8%;
		color: #778899;
	}
</style>